{extend name="layouts@base" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/mobile/default/css/fenlei.css" />
<style>
  .el-icon-phone {
    color: green;
    font-size: 20px;
  }

  .el-icon-location-information {
    color: #ff6884;
    font-size: 20px;
  }

  .store {
    padding: 10px 12px;
  }

  .store-cover {
    border-radius: 4px;
    overflow: hidden;
  }

  .store-content {
    padding: 5px 10px;
  }


  .van-panel__header {
    display: none;
  }
</style>
{/block}
{block name="pageType"}fenlei{/block}
{block name="main" }

<div class="page-bd" id="app">
  <van-panel>
    <div class="store flex-center">
      <van-image width="1rem" height="1rem" class="store-cover" src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>
      <div class="store-content flex-item">
        <div>{$store.store_name}</div>
        <div>联系方式: {$store.store_phone}</div>
        <div>联系地址: {$store.store_address}</div>
      </div>
    </div>
    <div slot="footer">
      <div class="flex-center">
        <a href="tel:{$store.store_phone}" class="flex-item flex-center">
          <i class="el-icon-phone pr-1"></i>
          一键拨打
        </a>
        <a class="flex-item flex-center"
          href="http://api.map.baidu.com/marker?location={$store.lat},{$store.lng}&title=商家位置&content={$store.store_name}&output=html">
          <i class="el-icon-location-information pr-1"></i>
          地图导航
        </a>
      </div>
    </div>
  </van-panel>

  <van-tabs type="card" class="mt-3">
    <van-tab title="店铺介绍"></van-tab>
    <van-tab title="店铺商品">
      <div class="m">
        <van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          origin-price="10.00">
          <div slot="num">
            <van-stepper v-model="value" ></van-stepper>
          </div>
          <div slot="footer">
            <van-button type="primary" size="small" class="mt-2" color="#ee0a24">添加购物车</van-button>
          </div>
        </van-card>
        <van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          origin-price="10.00">
        </van-card>
        <van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          origin-price="10.00">
        </van-card>
        <van-card num="2" tag="标签" price="2.00" desc="描述信息" title="商品标题" thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
          origin-price="10.00">
        </van-card>
      </div>
    </van-tab>
  </van-tabs>
  <!-- 页面内容-->
  <!--        <div class="top bor_b">-->
  <!--        <a href="{:url('index/search')}">-->
  <!--            <div class="inputBox"><img src="__STATIC__/mobile/default/images/selech01.png" alt=""><form action="{:url('goods/index')}"><input class="fs30 color_3" type="text" placeholder="请输入关键词"></form></div></a>-->
  <!--           <span class="fs30 color_3" onclick="javascript:history.go(-1);">取消</span>-->
  <!--        </div>-->
  <div class="inputBox"><img style="height:200px;" src="{$store.store_img}" alt="">
    <!--              <a href="http://api.map.baidu.com/marker?location=40.047669,116.313082&title=商家位置&name=测试&content=百度奎科大厦&output=html">地图导航</a>-->
    <a
      href="http://api.map.baidu.com/marker?location={$store.lat},{$store.lng}&title=商家位置&content={$store.store_name}&output=html">地图导航</a>
    <div>店铺名字： <input value="{$store.store_name}" /> </div>
    <div>联系电话： <input value="{$store.store_phone}" /> </div>
    <div>详细地址： <input value="{$store.store_address}" /> </div>
    {volist name="classList" id="goods"}
    <a href="{:_url(" goods/info",["id"=>$goods.goods_id])}"> <div><img src="{$goods.goods_thumb}" style="height:200px;"
        alt="">
  </div>
  <div> 名称： {$goods.goods_name}</div>
  <div> 价格： {$goods.shop_price}</div>
  </a>
  {/volist}
  <!--        <div class="left bor_R">-->
  <!--          {notempty name="$allSort.best"}-->
  <!--          	<div class="box fs28 color_3 boxActive">推荐</div>-->
  <!--          {/notempty}-->
  <!--           {volist name="allSort.rows" id="class" }-->
  <!--           		<div class="box fs28 color_3 {if condition="empty($allSort['best']) && $i == 1"}boxActive{/if}">{$class['m_name']?$class['m_name']:$class['name']}</div>-->
  <!--           {/volist}-->
  <!--        </div>-->
  <!--        <div class="right">-->
  <!--         {notempty name="$allSort.best"}-->
  <!--          	<div class="rightBox" style="display:block">-->
  <!--            {volist name="allSort.best" id="best" }-->
  <!--              <div class="block">-->
  <!--                  <div class="title"><i></i><span class="fs28 fw_b color_3">{$best.m_name}</span><i></i></div>-->
  <!--                  <div class="list">-->
  <!--                  	{volist name="best.children" id="cid"}-->
  <!--                      <a href='{:url("goods/index",['cid'=>$cid])}'><img src="{$classList[$cid]['pic']}" alt=""><span class="fs26 color_6">-->
  <!--                      {$classList[$cid]['m_name']?$classList[$cid]['m_name']:$classList[$cid]['name']}-->
  <!--                      </span></a>-->
  <!--                    {/volist}-->
  <!--                  </div>-->
  <!--              </div>-->
  <!--            {/volist}-->
  <!--          </div>-->
  <!--          {/notempty}-->



  <!--        </div>-->
</div>
{/block}
{block name="footer"}
<script src="__STATIC__/built/pages/storeInfo.js"></script>

<script>
  $(function () {
    $('.top span').on('click', function () {
      $('.inputBox input').val('');
      $('.inputBox input').focus();
    });
    $('.box').on('click', function () {
      var index = $(this).index();
      $(this).addClass('boxActive');
      $(this).siblings().removeClass('boxActive')
      $('.rightBox').eq(index).show();
      $('.rightBox').eq(index).siblings().hide();
    })
  })
</script>
{/block}